<template>
	<common-card class="portal_teacher_status">
		<sw-chart :option="chartOption" auto-resize></sw-chart>
	</common-card>
</template>

<script lang="ts" setup>
import { useChart } from '@/hooks';
import commonCard from '../commonCard.vue';
defineOptions({ name: 'TeacherStatus' });
interface ChartProp {
	name: string;
	value: number;
}
const chartData = ref<ChartProp[]>([
	{ name: '在岗', value: 150 },
	{ name: '请假', value: 53 },
	{ name: '出差', value: 34 }
]);
const colors = ['#246EFF', '#00B2FF', '#81E2FF', '#846BCE', '#86DF6C'];
const { chartOption } = useChart((isDark: EChartsOption) => {
	return {
		tooltip: { show: true, trigger: 'item' },
		series: [
			{
				type: 'pie',
				radius: ['36%', '45%'],
				center: ['50%', '50%'],
				label: { formatter: '{d}% ', color: isDark ? 'rgba(255, 255, 255, 0.7)' : '#4E5969' },
				data: chartData.value
			}
		]
	};
});
</script>

<style lang="scss" scoped>
.portal_teacher_status {
}
</style>
